<template>
    <template v-for="(menu, index) in menus" :key="index">
        <template v-if="menu.children">
            <div v-if="!menu.hide ">
                <lay-sub-menu :id="menu.id">
                    <template #icon>
                        <lay-icon :type="menu.icon"></lay-icon>
                    </template>
                    <template #title>{{ menu.title }}</template>
                    <GlobalMenuItem :menus="menu.children"></GlobalMenuItem>
                </lay-sub-menu>
            </div>
        </template>
        <template v-else>
            <div v-if="!menu.hide">
                <lay-menu-item :id="menu.id">
                    <template #icon>
                        <lay-icon :type="menu.icon"></lay-icon>
                    </template>
                    <template #title>{{ menu.title }}</template>
                </lay-menu-item>
            </div>
        </template>
    </template>
</template>
<script lang="ts" name="GlobalMenuItem" setup>
interface Props {
    menus: any
}
const props = withDefaults(defineProps<Props>(), {
    menus: undefined,
});
</script>
